<template>
<div class="login" :style="{minHeight: minHeight}">
    <div class="register-card bgwrite">
      <div class="top-bg">
        <div class="background-name">
          <div class="img-case"></div>
        </div>
        <div class="close-icon" @click="closePageClick"><img class="fr" src="@/assets/img/login/closePage02.png"></div>
      </div>
      <div class="reset-wrapper bgwrite">
        <div class="loginWrap">
            <div class="loginForm">
              <div class="loginPhone bgwrite"
                      ref="loginPhoneref">
                    <img src="@/assets/img/login/contract.png"
                          class="fl phoneIcon" />
                    <form style="width: 100%;">
                        <input type="number"
                                :placeholder="phoneNumP"
                                class="phoneInput"
                                style="width: 100%;"
                                v-model="phoneNum"
                                ref="phoneInputref"
                          @blur="setBMH"
                                @click="inputFocusPhone"
                                v-on:input="inputPhone"/>
                    </form>
                    <img v-if="phoneNum" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="clearNumber">
                </div>
              <div class="loginPassword bgwrite"
                    ref="loginPhoCoderef">
                  <img src="@/assets/img/login/phone.png"
                        class="phoCodeIcon" />
                  <form>
                      <input type="number"
                              :placeholder="phoCodeNumP"
                              class="phoCodeInput"
                              style="width:100%;"
                              v-model="phoCodeNum"
                              ref="loginCoderef"
                          @blur="setBMH"
                              @click="inputFocusCode"
                              v-on:input="inputPhoCode" />
                  </form>
                  <input
                    type="button"
                    v-model="getPhoCode"
                    class="getphoCode wordsWrite"
                    @click="getphoCode"
                          @blur="setBMH"
                    v-if="Reciprocal"
                    >
                    <input type="button" v-model="getPhoCode" class="getphoCodeR wordsWrite" v-else>
              </div>
              <div class="loginPassword"
                    ref="registerPwdref">
                  <img src="@/assets/img/login/pwd.png"
                        class="phoCodeIcon" />
                  <form style="width: 100%;">
                      <input type="password"
                              :placeholder="setPwdPl"
                              class="phoCodeInput"
                              style="width:100%;"
                              v-model="setPwd"
                              ref="setPwdref"
                          @blur="setBMH"
                              @click="inputFocusPwd"
                              v-on:input="inputPwding" />
                  </form>
              </div>
              <div class="loginPassword"
                    ref="registerCheckref">
                  <img src="@/assets/img/login/pwd.png"
                        class="phoCodeIcon" />
                  <form style="width: 100%;">
                      <input type="password"
                              :placeholder="checkPwdPl"
                              class="phoCodeInput"
                              style="width: 100%;"
                              v-model="checkPwd"
                               @blur="setBMH"
                              ref="checkPwdref"
                              @click="inputFocusRepwd"
                              v-on:input="checkPwding" />
                  </form>
              </div>
              <div class="contract-forget">
                <div class="contract-left">
                  <van-checkbox v-model="checked" checked-color="#5E8EFE" class="checkbox-style"><div class="contract-word"  @click="goUserContract">平台协议</div></van-checkbox>
                </div>
              </div>
              <!-- 注册按钮 -->
              <div class="loginBtn wordsWrite"
                 @click="registerClick">
                  <p class="loginFont">{{ loginState }}</p>
              </div>
              <div class="go-login" @click="goLogin">已有账号，去登录</div>
              
            </div>
        </div>
        <!-- <div class="bgwrite" style="width: 100%;background: #fff;">
          <div class="fast-login">
              <div class="top-header">
                  <div class="border-box"></div>
                  <div class="words-box">一键快捷登录</div>
                  <div class="border-box"></div>
              </div>
              <div class="login-case">
                <div class="login-icon"><img src="@/assets/img/login/wechat.png"/></div>
                <div class="login-icon"><img src="@/assets/img/login/qq.png"/></div>
              </div>
          </div>
        </div> -->
        <div style="height: 1rem; background: #fff;vertical-align:top;"></div>
      </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { setUserLogin, setToken, setuserUid, setRole} from "@/utils/auth.js";
export default {
  name:"register",
  components: {
  },
  data() {
    return {
      getPhoCode: "发送验证码",
      loginState: "注册",
      phoneRegular: /^1[0-9]\d{9}$/,
      pswdNumRegular: /^[a-zA-Z0-9]{6,12}$/,
      phoneNum: "",
      phoneNumP: "请输入你的手机号",
      phoCodeNum: "",
      phoCodeNumP: "请输入验证码",
      setPwd: "",
      setPwdPl: "请输入密码",
      checkPwd: "",
      checkPwdPl: "请再次输入密码",
      phoneType:"",
      time: 60,
      Reciprocal: true,
      minHeight: '100vh',
      checked: true
    }
  },
  computed: {
    ...mapState({ 
      willUserPhone: state => state.willUserPhone,
      willUserCode: state => state.willUserCode,
      willUserPwd: state => state.willUserPwd,
      willUserPwdCheck: state => state.willUserPwdCheck,
       })
  },
  created() {
     if (this.$route.params.hasContent =  "1") {
      //  从协议跳转 记录 用户之前跳转前的操作
      this.phoneNum = this.willUserPhone
      this.phoCodeNum = this.willUserCode
      this.setPwd = this.willUserPwd
      this.checkPwd  = this.willUserPwdCheck
     }
  },
  methods: {
    setBMH(){
      this.minHeight = '100vh'
    },
    setFMH(){
      this.minHeight = '130vh'
    },
    // 电话聚焦
    inputFocusPhone() {
      this.$refs.phoneInputref.focus()
      this.setFMH()
    },
    // 验证码校验
    inputFocusCode() {
      this.$refs.loginCoderef.focus()
      this.setFMH()
    },
    // 密码初次校验
    inputFocusPwd() {
      this.$refs.setPwdref.focus()
      this.setFMH()
    },
    // 密码二次校验
    inputFocusRepwd() {
      this.$refs.checkPwdref.focus()
      this.setFMH()
    },
    goLogin() {
      this.$router.push('/login')
    },
    closePageClick() {
      this.$router.push('/login')
    },
    // 跳转合同
    goUserContract() {
      if (this.phoneNum != ""){
        this.setWillUserPhone(this.phoneNum)
      }
      if (this.phoCodeNum != "") {
        this.setWillUserCode(this.phoCodeNum)
      }
      if (this.setPwd != "") {
        this.setWillUserPwd(this.setPwd)
      } 
      if (this.checkPwd != "") {
        this.setWillUserPwdCheck(this.checkPwd)
      }
      this.$router.push({path: 'userContract', query: {fromW: 'registerF'}})
    },
    getphoCode() {
      if (this.phoneNum == "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNumP = "请输入你的手机号";
        return false;
      } else if (!this.phoneRegular.test(this.phoneNum)) {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNum = "";
        this.phoneNumP = "请输入正确的手机号";
        return false;
      } else {
        let clickCode = "0000";
        this.time = 60
        this.Reciprocal = false;
        this.timer();
        // this.inspectPhone(clickCode);
        this.sendPhoneCode();
      }
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.getPhoCode = this.time + "s";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.getPhoCode = "获取验证码";
        this.Reciprocal = true;
      }
    },
    inputPhone() {
      if (this.phoneNum !== "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #e6e6e6;";
        this.$refs.phoneInputref.style = "color:#333131;";
      }
    },
    inputPhoCode() {
      if (this.phoCodeNum !== "") {
        this.$refs.loginCoderef.style = "color:#333131;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    // 初次输入密码
    inputPwding() {
      if (this.setPwd !== "") {
        this.$refs.setPwdref.style = "color:#333131;";
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    // 再次输入密码
    checkPwding() {
      if (this.checkPwd !== "") {
        this.$refs.checkPwdref.style = "color:#333131;";
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    registerClick() {
      if (this.phoneNum === "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNumP = "请输入你的手机号";
        return false;
      } else if (!this.phoneRegular.test(this.phoneNum)) {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNum = "";
        this.phoneNumP = "请输入正确的手机号";
        return false;
      } else if (this.phoCodeNum === "") {
        this.$refs.loginCoderef.style = "color:#EA1F36;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #EA1F36;";
        this.phoCodeNumP = "输入你的验证码";
        return false;
      } else if (this.phoCodeNum.length !== 6) {
        this.$refs.loginCoderef.style = "color:#EA1F36;";
        this.$refs.loginPhoCoderef.style = "border-bottom: 1px solid #EA1F36;";
        this.phoCodeNum = "";
        this.phoCodeNumP = "输入正确的验证码"
        return false;
      } else if (this.setPwd === "") {
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.setPwdref.style = "color:#EA1F36;";
        this.setPwdPl= "请设置密码"
        return false;
      } else if (!this.pswdNumRegular.test(this.setPwd)){
        this.$refs.registerPwdref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.setPwdref.style = "color:#EA1F36;";
        this.setPwd = ""
        this.setPwdPl= "密码须6 - 12 位数字/字母"
        return false;
      } else if (this.checkPwd === "") {
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.checkPwdref.style = "color:#EA1F36;";
        this.checkPwdPl = "请确认密码"
        return false;
      } else if (this.setPwd !== this.checkPwd) {
        this.$refs.registerCheckref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.checkPwdref.style = "color:#EA1F36;";
        // this.checkPwd = "密码不一致";
        this.checkPwd = ""
        this.checkPwdPl = "密码不一致"
        return false;
      } else if (!this.checked) {
        this.$toast({message: "请勾选平台协议"})
        return false;
      }
       this.Codelogin();
    },
    //发送验证码
    async sendPhoneCode() {
      const SPC = await HTTP("getCode", {
        phoneNumber: this.phoneNum,
        type: "1"
      });
      if (SPC.code == 200) {
        this.$toast({
            message: "验证码发送成功"
        })
      } else if(SPC.code == 1006) {
        this.$toast({
            message: "用户已存在， 请登录"
        })
        this.time = 0;
        this.getPhoCode = "发送验证码";
        this.Reciprocal = true;
      } else {
        this.$toast({
            message: SPC.msg
        })
      }
    },
    // 注册
    async Codelogin() {
      const self = this
      const Codelogin = await HTTP("registerEnrolment", {
        phone: self.phoneNum,
        password: self.$md5(self.setPwd),
        pin: self.phoCodeNum
        // pin: "111111" // 需要删除
      });
      // this.setuserlogin(Codelogin.data)
      if (Codelogin.code == 200) {
        setUserLogin(Codelogin.data)
        setToken(Codelogin.data.token);
        setuserUid(Codelogin.data.uid)
        setRole(Codelogin.data.role)
        self.setWillUserPhone("")
        self.setWillUserCode("")
        self.setWillUserPwd("")
        self.setWillUserPwdCheck("")
        const toast = self.$toast.success({
          duration: 2000,       // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '注册成功'
        });

        let second = 2;
        const timer = setInterval(() => {
          second--;
          if (!second) {
            clearInterval(timer);
            self.$toast.clear();
            self.$router.push('/designer/homePage')
          }
        }, 1000);
      } else {
        self.$toast({message:Codelogin.msg})
      }
    },
    clearNumber() {
      this.phoneNum = ""
    },
    ...mapMutations(["setWillUserPhone", "setWillUserCode", "setWillUserPwd", "setWillUserPwdCheck"])
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background: #fff;
}
.register-card {
  width: 100%;
  height: 100%;
  .top-bg{
      position: relative;
      width: 100%;
      height: 4.5rem;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      .background-name {
        position: absolute;
        top: 0;
        width: 100%;
        height: 4.5rem;
        .img-case{
          width: 100%;
          height: 4.5rem;
          margin: 0 auto;
          background-image: url(../../assets/img/login/backgroundIcon.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 100% 4.5rem;
        }

      }
      .close-icon{
        position: absolute;
        width: 0.9rem;
        height: 0.9rem;
        top: 0.30rem;
        right: 0.30rem;
        img{
          width: 0.36rem;
          height: 0.36rem;
        }
      }
  }
  .reset-wrapper{
    position: absolute;
    top: 2.4rem;
    width: 100%;
    background: transparent;
  }
  .loginWrap {
    width: 80%;
    margin: 0 auto;
    .LoginFont {
      width: 100%;
      font-size: 0.26rem;
      font-weight: 500;
      margin-top: 0.4rem;
    }
    .loginForm {
      position: relative;
      width: 100%;
      .loginPhone {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInput {
          width: 4.5rem;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .pwd-right{
          position: absolute;
          width: 0.3rem;
          right: 0.24rem;
          top: 0px;
          bottom: 0px;
          margin: auto;
        }
      }
      .loginPassword {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoCodeIcon {
          width: 0.3rem;
        }
        .pwd-right{
          position: absolute;
          width: 0.30rem;
          right: 0.24rem;
        }
        .phoCodeInput {
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          height: 0.4rem;
          border: 0;
          margin-left: auto;
          font-size: 0.3rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #606775;
          background: #fff;
        }
      }
      
      .contract-forget{
        position: relative;
        width: 100%;
        margin-top: 0.5rem;
        div{
          display: inline-block;
        }
        .contract-left{
          .contract-word{
            display: inline-block;
            color: #5E8EFE;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
      }
      .loginPhoCode {
        width: 100%;
        height: 1rem;
        // display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0.2rem;

        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          width: 100%!important;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.6rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius:0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          width: 1rem;
          height: 0.4rem;
          background-color: #a4a09c;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
        }
      }
      .loginBtn {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.9rem;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #5E8EFE;
      }
      .go-login{
        margin-top: 0.5rem;
        width: 100%;
        height: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #656565;
      }
    }
  }
  .fast-login{
    box-sizing: border-box;
    width: 100%;
    padding: 0.45rem 10% 0.45rem;
    .top-header{
      width: 100%;
      div{
        display: inline-block;
      }
      .border-box{
        height: 0.01rem;
        width: 35%;
        line-height: 0.24rem;
        vertical-align: middle;
        background: #E5E5E5;
      }
      .words-box{
        width: 30%;
        text-align: center;
        height: 0.24rem;
        line-height: 0.24rem;
        color: #AAAAAA;
        font-size: 0.24rem;
      }
    }
    .login-case{
      width: 100%;
      margin-top: 0.5rem;
      div {
        display: inline-block;
        width: 50%;
        height: 0.9rem;
      }
      .login-icon{
        position: relative;
        img{
          width: 0.9rem;
          height: 0.9rem;
          position: absolute;
          top:50%; 
          left:50%;
          transform: translate(-50%,-50%);
        }
      }
    }
  }
}
</style>
